<template>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="客户数据" name="first">
            <div class="orderListRuleForm">
                <panle title='客户数据列表' content="客户数据列表"></panle>
                <el-row class="demo-form-inline">
                    <el-col class="client-demo" :span="3">
                        <p>聊天总数（条）: </p>
                        <p>{{chatcnt}}</p>
                    </el-col>
                    <el-col class="client-demo" :span="3">
                    <p>发送消息数（条）: </p>
                    <p>{{messagecnt}}</p>
                    </el-col>
                    <el-col class="client-demo" :span="3">
                        <p>已回复聊天占比: </p>
                        <p>{{replypercentage}}</p>
                    </el-col>
                    <el-col class="client-demo" :span="3">
                        <p>平均首次回复时长: </p>
                        <p>{{avgreplytime}}</p>
                    </el-col>
                </el-row>

                <el-form :inline="true" ref="form" :model="form" label-width="90px" class="demo-form-inline">
                    <el-form-item label="员工" prop="staff_name">
                        <el-select v-model="form.value" size="mini" filterable placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="stat_time">
                        <el-date-picker
                            v-model="form.stat_time"
                            type="daterange"
                            align="right"
                            size="mini"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" size="mini">搜索</el-button>
                        <el-button @click="resetForm('form')" size="mini">重置</el-button>
                        <el-button size="mini" @click="init()">刷新</el-button>
                        <vue-json-excel
                            style="display: inline;margin-left: 10px;"
                            :data="tableData"
                            :fields="excelFields"
                            name="导出客户数据.xlsx"
                            type="xlsx">
                            <el-button size="mini">导出</el-button>
                        </vue-json-excel>
                    </el-form-item>
                </el-form>
               
                <div class="table-wrap">
                    <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                              stripe >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="user_name" label="员工"></el-table-column>
                        <el-table-column prop="new_apply_cnt" label="发起申请数"></el-table-column>
                        <el-table-column prop="new_contact_cnt" label="新增客户数"></el-table-column>
                        <el-table-column prop="new_contact_cnt" label="客户总数"></el-table-column>
                        <el-table-column prop="chat_cnt" label="聊天总数"></el-table-column>
                        <el-table-column prop="message_cnt" label="发送消息数"></el-table-column>
                        <el-table-column prop="reply_percentage" label="已回复聊天占比"></el-table-column>
                        <el-table-column prop="avg_reply_time" label="平均回复时长"></el-table-column>
                        <el-table-column prop="negative_feedback_cnt" label="流失客户数"></el-table-column>

                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="form.pageSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="form.total"></el-pagination>
                    </div>
                </div>
            </div>
            
        </el-tab-pane>
        <el-tab-pane label="群数据" name="second">
            <div class="orderListRuleForm">
                <panle title='群数据列表' content="群数据列表"></panle>
                <el-row class="demo-form-inline">
                    <el-col class="order__item" :span="3">
                        <p>群聊总数（条）: </p>
                        <p>{{msgtotal}}</p>
                    </el-col>
                    <el-col class="order__item" :span="3">
                        <p>有过消息的群聊数（条）:</p>
                        <p>{{chathasmsg}}</p>
                    </el-col>
                    <el-col class="order__item" :span="3">
                        <p>群成员数: </p>
                        <p>{{membertotal}}</p>
                    </el-col>
               
                    <el-col class="order__item" :span="3">
                        <p>有过群消息的群成员数: </p>
                        <p>{{memberhasmsg}}</p>
                    </el-col>
                </el-row>
                <el-form :inline="true" ref="reform" :model="reform" label-width="90px" class="demo-form-inline">
                    <el-form-item label="群主" prop="staff_name">
                        <el-select v-model="reform.value1" size="mini" filterable placeholder="请选择">
                            <el-option
                                v-for="item in optionsVa"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="stat_time">
                        <el-date-picker
                            v-model="reform.stat_time"
                            type="daterange"
                            align="right"
                            size="mini"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchVa" size="mini">搜索</el-button>
                        <el-button @click="resetFormVs('reform')" size="mini">重置</el-button>
                        <el-button size="mini" @click="init()">刷新</el-button>
                        <vue-json-excel
                            style="display: inline;margin-left: 10px;"
                            :data="tableData"
                            :fields="excelFieldsVa"
                            name="导出群数据.xlsx"
                            type="xlsx">
                            <el-button size="mini">导出</el-button>
                        </vue-json-excel>
                    </el-form-item>
                </el-form>

                <div class="table-wrap">
                    <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                              stripe >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="owner_name" label="员工"></el-table-column>
                        <el-table-column prop="msg_total" label="群聊总数"></el-table-column>
                        <el-table-column prop="new_chat_cnt" label="新增群聊数"></el-table-column>
                        <el-table-column prop="chat_has_msg" label="有过消息群聊数"></el-table-column>
                        <el-table-column prop="member_total" label="群成员数"></el-table-column>
                        <el-table-column prop="new_member_cnt" label="新增群成员数"></el-table-column>
                        <el-table-column prop="member_has_msg" label="发过消息的群成员数"></el-table-column>
                        <el-table-column prop="msg_total" label="群聊消息总数"></el-table-column>

                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="reform.pageNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="reform.pageSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="reform.total"></el-pagination>
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
   
</template>

<script>
import { getStaffData} from "@/api/scrm/lapsed/lapsed";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import VueJsonExcel from 'vue-json-excel';

import {
    getCrowdCount,
    getGroupCountData,
    getGroupInfo,
    getStaffCountData,
    getStatisCount
} from "@/api/scrm/staffCount/staffCount";

export default {
    name:'Live-Order',
    components: {
        Panle, 
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            options: [],
            value: '',
            open: false,
            tableData: [],
            number:0,
            chatCount:0,
            value_1: true,
            value_2: true,
            activeName: 'first',
            chatcnt:0,
            messagecnt:0,
            replypercentage:0,
            avgreplytime:0,
            
            msgtotal:0,
            chathasmsg:0,
            membertotal:0,
            memberhasmsg:0,
            form: {
                stat_time: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
             
            },
            reform:{
                stat_time:'',
                value1:'',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
            },
            optionsVa: [],
            value1: [],
           
            resForm: {
                "status":0,
                "value1":[]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            excelFields: {
                "员工 ": "user_name",
                "发起申请数": "new_apply_cnt",
                "新增客户数": "new_contact_cnt",
                "客户总数": "new_contact_cnt",
                "聊天总数": "chat_cnt",
                "发送消息数": "message_cnt",
                "已回复聊天占比": "reply_percentage",
                "平均回复时长": "avg_reply_time",
                "流失客户数": "negative_feedback_cnt",
            },
            excelFieldsVa: {
                "员工 ": "owner_name",
                "群聊总数": "msg_total",
                "新增群聊数": "new_chat_cnt",
                "有过消息群聊数": "chat_has_msg",
                "群成员数": "member_total",
                "新增群成员数": "new_member_cnt",
                "发过消息的群成员数": "member_has_msg",
                "群聊消息总数": "msg_total",
            }
        }
    },
    created() {
        sessionStorage.removeItem('live-stat')
        this.init(true);
    },
    methods: {
        init() {
            this.loading = true;
            //客户数据
            if(this.activeName == 'first'){
                getStaffCountData(this.form).then((res) => {
                    this.tableData = res.data.list;
                    this.form.total = res.data.total;
                    this.loading = false;
                })
                getStaffData(this.form).then((res) => {
                    this.options = res.data;
                })
                getStatisCount(this.form).then((res) => {
                    this.chatcnt = res.data.chatcnt;
                    this.messagecnt = res.data.messagecnt;
                    this.replypercentage = res.data.replypercentage;
                    this.avgreplytime = res.data.avgreplytime;
                })
            }else { //群数据
                getGroupCountData(this.reform).then((res) => {
                    this.tableData = res.data.list;
                    this.reform.total = res.data.total;
                    this.loading = false;
                })
                getGroupInfo(this.reform).then((res) => {
                    
                    this.optionsVa = res.data;
                })
                getCrowdCount(this.reform).then((res) => {
                    this.msgtotal = res.data.msgtotal;
                    this.chathasmsg = res.data.chathasmsg;
                    this.membertotal = res.data.membertotal;
                    this.memberhasmsg = res.data.memberhasmsg;
                })
            }
        },
        handleClick(tab, event) {
            this.activeName = tab.name;
            this.init()
            console.log(tab, event);
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        searchVa: function () {
            this.loading = true;
            this.reform.pageSize = 10;
            this.reform.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.stat_time = ''
            this.form.value = ''
            this.form.value1 = ''
            this.init();
        },
        resetFormVs(formName) {
            this.reform.stat_time = ''
            this.reform.value = ''
            this.reform.value1 = ''
            this.init();
        },


    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}
.order__item{
    padding:10px 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-left:60px;
}
.client-demo{
    padding:10px 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-left:60px;
}

</style>